flo-bit.dev
[READ-ONLY] Mirror of https://github.com/flo-bit/blog-template. minimalistic astro blog template
flo-bit.dev/blog-template/
astro
blog
template
1.7 kB
58 lines
1---
2import {
3 SITE_TITLE,
4 SITE_DESCRIPTION,
5 POSTS_PER_PAGE,
6 ACCENT_COLOR,
7 BASE_COLOR,
8} from "../../consts";
9
10import { getCollection } from "astro:content";
11
12import Header from "$components/Header.astro";
13import Footer from "$components/Footer.astro";
14import BaseLayout from "$layouts/BaseLayout.astro";
15import BlogEntry from "$components/BlogEntry.astro";
16import Pagination from "$components/Pagination.astro";
17import { colorBaseClasses, colorAccentClasses } from "src/colors";
18
19export async function getStaticPaths() {
20 const posts = await getCollection("blog");
21 return Array.from({ length: Math.ceil(posts.length / POSTS_PER_PAGE) }).map(
22 (_, index) => ({
23 params: { index: (index + 1).toString() },
24 props: { index: index + 1 },
25 })
26 );
27}
28
29const { index } = Astro.props;
30
31const posts = (await getCollection("blog"))
32 .sort((a: any, b: any) => b.data.pubDate.valueOf() - a.data.pubDate.valueOf())
33 .splice(POSTS_PER_PAGE * (index - 1), POSTS_PER_PAGE);
34
35const total = Math.ceil((await getCollection("blog")).length / POSTS_PER_PAGE);
36---
37
38<BaseLayout title={SITE_TITLE} description={SITE_DESCRIPTION}>
39 <Header />
40
41 <main class="mx-auto max-w-2xl lg:max-w-3xl py-16">
42 <div
43 class={"prose dark:prose-invert text-base-900 dark:text-base-50 px-4 " +
44 colorBaseClasses[BASE_COLOR] +
45 " " +
46 colorAccentClasses[ACCENT_COLOR]}
47 >
48 <h1>All blog posts</h1>
49 </div>
50 <div class="my-14 space-y-14 max-w-3xl px-4">
51 {posts.map((post: any) => <BlogEntry {...post.data} slug={post.slug} />)}
52 </div>
53
54 {total > 1 ? <Pagination current={index} total={total} /> : null}
55 </main>
56
57 <Footer />
58</BaseLayout>